import React,{useState} from 'react'
import Head from 'next/head'
import Header from '../components/Header'
import Author from '../components/Author'
import Advert from '../components/Advert'
import Footer  from '../components/Footer'
import {Row,Col,List,Breadcrumb} from 'antd'
import {FieldTimeOutlined,FireOutlined,FolderOutlined} from  '@ant-design/icons';

import axios from 'axios'
import apiUrl from '../config/apiUrl'
import Link from 'next/link'

//引入markdown
import { marked } from 'marked'
import hljs from "highlight.js";

export default function myList(list) {
  const [myList,setMyList] = useState(list.data)

   const renderer = new marked.Renderer();
   marked.setOptions({
     renderer:renderer,
     gfm:true, //渲染的样式和github相似
     pedantic:false,//容错配置，false为不保证我穿过来的值是完成正确的，marked自动改错
     sanitize:false,//是否忽略HTML标签
     // tables:true,//是否输出table样式
     breaks:true,//是否输出GitHub的换行符
     smartLists:true,//是否自动渲染列表样式
     highlight:function(code){ //如何让代码显示高亮
       return hljs.highlightAuto(code).value
     }
   })
  return (
    <div>
      <Head>
        <title>Home</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header />
      <Row className="comm-main" justify="center">
        <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}>
            <div className="bread-div">
              <Breadcrumb>
                <Breadcrumb.Item><a href="/">首页</a></Breadcrumb.Item>
                <Breadcrumb.Item>视频教程</Breadcrumb.Item>
              </Breadcrumb>
            </div>
            <List 
              header={<div>最新日志</div>}
              itemLayout="vertical"
              dataSource={myList}
              renderItem={item=>(
                <List.Item>
                  <div className="list-title">
                   <Link href={{pathname:'/detailed',query:{id:item.id}}}><a>{item.title}</a></Link> 
                  </div>
                  <div className="list-icon">
                    <span><FieldTimeOutlined />{item.addTime}</span>
                    <span><FolderOutlined />{item.typeName}</span>
                    <span><FireOutlined />{item.view_count}</span>
                  </div>
                  <div className="list-context" dangerouslySetInnerHTML={{__html:marked.parse(item.introduce)}}></div>
                </List.Item>
              )}
            />
        </Col>
        <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
            <Author />
            <Advert />
        </Col>
      </Row>
      <Footer />
    </div>
  )
}

myList.getInitialProps = async (context)=>{
  const promise =  axios(apiUrl.getListById+context.query.id).then(res=> res.data)
   return await promise
 }